<template>
  <div class="index layout">
    <div class="content layout">
      <div class="home-banner">
        <span class="ctn-sign-num">{{ctnSign}}</span>-
        <button class="show-rules" @click="popupSwitch('rules')">活动规则</button>
      </div>
      <ul :class="[cptCalendar,'calendar']">
        <li
          :class="[cptDateName(n), {'signed': n <= ctnSign}]"
          v-for="n in arrHandle"
          :key="n">
        </li>
      </ul>
      <button :class="['sign-btn', {'hasDrawn':hasDrawn}]" @click="popupSwitch('brand')"></button>
    </div>
    <popup :popup-show="popupShow">
      <brand  v-if="brand" :popup-switch="popupSwitch" :type="cptDateName(ctnSign)"></brand>
      <rules v-if="rules" :popup-switch="popupSwitch"></rules>
      <failed v-if="failed" :popup-switch="popupSwitch"></failed>
    </popup>
  </div>
</template>

<script>
  import localDAO from '@/common/localDAO'
  import remoteDAO from '@/common/remoteDAO'
  import {getDateNum, getUrlParam} from '@/common/common'
  import popup from 'components/common/Popup'
  import { microspotTarget } from '@/common/decorators'
  import brand from './children/Brand'
  import rules from './children/Rules'
  import failed from './children/Failed'
  export default{
    name: 'index',
    data () {
      return {
        hasDrawn: false,
        numOfDate: getDateNum()[1],
        ctnSign: 0,  // 当前连续签到天数
        startTime: getDateNum()[0],
        endTime: getDateNum()[2],
        popupShow: false,
        brand: false,
        rules: false,
        failed: false,
        success: false
      }
    },
    components: {
      popup,
      brand,
      rules,
      failed
    },
    computed: {
      cptCalendar () {
        return this.numOfDate == 30 ? 'cld30' : `cld${this.numOfDate}`
      },
      arrHandle () {
        let tmpArr = new Array(this.numOfDate)
        for (let i = 0; i < this.numOfDate; i++) {
          if (i >= 7 && i <= 13) {
            tmpArr[i + (10 - i) * 2] = i + 1
          } else if (i >= 21 && i <= 27) {
            tmpArr[i + (24 - i) * 2] = i + 1
          } else {
            tmpArr[i] = i + 1
          }
        }
        return tmpArr
      }
    },
    methods: {
      cptDateName (n) {
        return (n !== 0 && n % 7 === 0 && n !== this.numOfDate)
          ? 'specialDay' : (n === this.numOfDate)
            ? 'fullSign' : 'ordinary'
      },
      sign () {
        remoteDAO.callUC12000022(localDAO.getUserCode(), this.$store)
          .then(async (res) => {
            console.log(res, '---------签到失败后重新签到----------')
            if (!res.data.body[0].error_no) {
              this.success = false
              this.popupSwitch('failed')
//              alert('签到失败，请稍后重试！')
            } else {
              let signRecord = await remoteDAO.callUC12000023(localDAO.getUserCode(), this.startTime, this.endTime, this.$store)
              this.ctnSign = signRecord.body.length
              this.success = true
              this.popupSwitch('brand')
            }
          })
      },
      /* 状态切换   传参控制popup内组件显示   不传参控制popup隐藏 */
      @microspotTarget
      popupSwitch (type, hasDrawn) {
        return new Promise((resolve, reject) => {
          // 如果 点击翻牌抽奖 并且状态为签到失败  调签到接口
          if (type == 'brand' && !this.success) {
            this.sign()
          }

          //  如果 点击翻牌抽奖 并且为已抽奖  或者 本地没有usercode  return
          if (type == 'brand' && this.hasDrawn || !localDAO.getUserCode() || type == 'brand' && !this.success) return

          this[type] = true;
          switch (type) {
            case 'brand':
              this.rules = this.failed = false;
              resolve('006003')
              break;
            case 'rules':
              this.brand = this.failed = false;
              resolve('006004')
              break;
            case 'failed':                        //  显示失败
              this.rules = this.brand = false;
              break;
            case 'cgLotteryStatus':       // 改变抽奖状态
              if (hasDrawn) this.hasDrawn = true
          }
          this.popupShow = !this.popupShow
        })
      },
      async init () {
        console.log('执行............')
        try {
          const USER_CODE = localDAO.getUserCode()
          if (!USER_CODE) throw new Error('获取用户代码失败！')

          // 获取用户签到记录
          let signRecord = await remoteDAO.callUC12000023(USER_CODE, this.startTime, this.endTime, this.$store)
          console.log(signRecord, '12000023用户签到记录')
          this.ctnSign = signRecord.body.length

          // url中获取签到状态
          let signStatus = getUrlParam('status') || '2'
          if (signStatus == 1 && !this.hasDrawn) {       // 签到成功并且未抽奖
            this.success = true
            this.popupSwitch('brand')
          } else if (signStatus == 3) {                //  已签到
            // 获取用户是否已抽奖
            let drowRecord = await remoteDAO.callUC12000330(USER_CODE, this.$store)
            this.hasDrawn = drowRecord.data.body[0].BAG_NUM === '0' ? 1 : 0
            console.log(Boolean(this.hasDrawn), '12000330已签到 获取用户抽奖状态')        //   0   已抽奖   1 为抽奖
          } else if (signStatus == 2) {
            this.success = false
            this.popupSwitch('failed')    // 签到失败
          }
        } catch (err) {
          this.$store.dispatch('setTip', {text: err.data ? err.data : err})
        }
      }
    },
    mounted () {
//      localDAO.clearStorage()
//      console.log(localStorage)
//      localStorage.clear()
    }
  }
</script>

<style lang="less" scoped="">
  @width: 329.5px;
  .content{
    background: #fffbf2;
  }
  .home-banner{
    position: relative;
    width: 100%;
    height: 235px;
    background: url("../../assets/images/home_banner.png") no-repeat 0 0 / cover;
    .show-rules{
      width: 71.4px;
      padding: 2.5px 0;
      border: 1PX #9fd6ff solid;
      border-radius: 12px;
      position: absolute;
      top:9px;
      right: 9px;
      color: #fff;
      background: rgba(255,255,255,.2);
      font-size: 14px;
      font-family: PingFangSC-Midium;
    }
    .ctn-sign-num{
      position: absolute;
      width: 26px;
      height: 22px;
      text-align: center;
      top:86px;
      right: 124px;
      font-size: 22px;
      color: #ec6420;
      transform: rotateZ(7deg);
    }
  }
  .calendar{
    display: inline-flex;
    flex-wrap: wrap;
    align-content: flex-start;
    background-size: 342px 239px;
    background-repeat: no-repeat;
    background-position-y: 22px;
    padding-left:10px;
    padding-right: 10px;
    height: 262px;
    width: 322.5px;
    &.cld28{
      background-size: 342px 187px !important;
      background-image: url("../../assets/images/path_28.png");
    }&.cld29{
       background-image: url("../../assets/images/path_29.png");
     }&.cld31{
      background-image: url("../../assets/images/path_31.png");
    }
    &.cld30{
      background-image: url("../../assets/images/path.png");
    }
    li{
      display: flex;
    }
    .ordinary{
      width: 37px;
      height: 31px;
      margin: 1px 10px 25px 0;
      background: url("../../assets/images/coin_gray.png") no-repeat  left top / 86.4% 96.7%;
    }
    .specialDay{
      margin: 1px 0 25px 0;
    }
    .specialDay, .fullSign{
      float: left;
      width: 36px;
      height: 32.5px;
    }
    li[class='ordinary signed']{
      background: url("../../assets/images/coin_gold.png") no-repeat 0 0 / cover !important;
    }
    .specialDay{      // 特殊日
      margin-top: -2px;
      background: url("../../assets/images/gift_gray.png") no-repeat 0 0 / contain;
    }
    li[class='specialDay signed']{    // 特殊日 已签
      background: url("../../assets/images/gift_light.png") no-repeat 0 0 / contain;
    }
    .fullSign{      //  满签日
      background: url("../../assets/images/box_gray.png") no-repeat 0 0 / cover;
    }
    li[class='fullSign signed']{    // 满签日 已签
      background: url("../../assets/images/box_gold.png") no-repeat 0 0 / cover !important;
    }
  }
  .sign-btn{
    margin-top: 15px;
    background: url("../../assets/images/btn_lottery.png") no-repeat 0 0 / cover;
    width: @width;
    height: 49px;
  }
  .hasDrawn{
    background: url("../../assets/images/signed.png") no-repeat 0 0 / cover !important;
  }
</style>
